<template>
  <view v-if="visible" class="modal-overlay" @click="handleOverlayClick">
    <view 
      :class="['modal-container', modalClass, `modal--${position}`, `modal--${size}`]"
      :style="[modalStyle, customStyle]"
      @click.stop
    >
      <!-- 弹窗头部 -->
      <view v-if="showHeader || $slots.header" class="modal-header">
        <slot name="header">
          <view v-if="title" class="modal-title">
            <text class="title-text">{{ title }}</text>
            <text v-if="subtitle" class="subtitle-text">{{ subtitle }}</text>
          </view>
          <view v-if="showClose" class="modal-close" @click="handleClose">
            <text class="iconfont-v2 icon-close close-icon"></text>
          </view>
        </slot>
      </view>

      <!-- 弹窗内容 -->
      <view class="modal-content">
        <slot>
          <text v-if="content" class="modal-text">{{ content }}</text>
        </slot>
      </view>

      <!-- 弹窗底部 -->
      <view v-if="showFooter || $slots.footer" class="modal-footer">
        <slot name="footer">
          <view v-if="showButtons" class="modal-buttons">
            <button
              v-if="showCancel"
              :class="['modal-button', 'modal-button--cancel', cancelButtonClass]"
              :style="cancelButtonStyle"
              @click="handleCancel"
            >
              {{ cancelText }}
            </button>
            <button
              v-if="showConfirm"
              :class="['modal-button', 'modal-button--confirm', confirmButtonClass]"
              :style="confirmButtonStyle"
              @click="handleConfirm"
            >
              {{ confirmText }}
            </button>
          </view>
        </slot>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * 通用弹窗组件
 * @description 通用的弹窗组件，支持多种位置、大小和自定义内容
 * @author 系统
 * @date 2024
 */

export default {
  name: 'CustomModal',
  props: {
    // 是否显示
    visible: {
      type: Boolean,
      default: false
    },
    // 弹窗标题
    title: {
      type: String,
      default: ''
    },
    // 副标题
    subtitle: {
      type: String,
      default: ''
    },
    // 弹窗内容
    content: {
      type: String,
      default: ''
    },
    // 取消按钮文本
    cancelText: {
      type: String,
      default: '取消'
    },
    // 确认按钮文本
    confirmText: {
      type: String,
      default: '确定'
    },
    // 是否显示头部
    showHeader: {
      type: Boolean,
      default: true
    },
    // 是否显示底部
    showFooter: {
      type: Boolean,
      default: true
    },
    // 是否显示关闭按钮
    showClose: {
      type: Boolean,
      default: true
    },
    // 是否显示取消按钮
    showCancel: {
      type: Boolean,
      default: true
    },
    // 是否显示确认按钮
    showConfirm: {
      type: Boolean,
      default: true
    },
    // 是否显示按钮
    showButtons: {
      type: Boolean,
      default: true
    },
    // 弹窗位置: 'center' | 'top' | 'bottom' | 'left' | 'right'
    position: {
      type: String,
      default: 'center',
      validator: value => ['center', 'top', 'bottom', 'left', 'right'].includes(value)
    },
    // 弹窗大小: 'small' | 'medium' | 'large' | 'full'
    size: {
      type: String,
      default: 'medium',
      validator: value => ['small', 'medium', 'large', 'full'].includes(value)
    },
    // 是否可点击遮罩关闭
    maskClosable: {
      type: Boolean,
      default: true
    },
    // 是否禁用确认按钮
    confirmDisabled: {
      type: Boolean,
      default: false
    },
    // 自定义类名
    modalClass: {
      type: String,
      default: ''
    },
    // 取消按钮类名
    cancelButtonClass: {
      type: String,
      default: ''
    },
    // 确认按钮类名
    confirmButtonClass: {
      type: String,
      default: ''
    },
    // 自定义样式
    customStyle: {
      type: Object,
      default: () => ({})
    },
    // 弹窗样式
    modalStyle: {
      type: Object,
      default: () => ({})
    },
    // 取消按钮样式
    cancelButtonStyle: {
      type: Object,
      default: () => ({})
    },
    // 确认按钮样式
    confirmButtonStyle: {
      type: Object,
      default: () => ({})
    },
    // 动画类型: 'fade' | 'slide' | 'zoom' | 'none'
    animation: {
      type: String,
      default: 'fade',
      validator: value => ['fade', 'slide', 'zoom', 'none'].includes(value)
    }
  },
  methods: {
    // 处理遮罩点击
    handleOverlayClick() {
      if (this.maskClosable) {
        this.handleClose()
      }
    },
    
    // 处理关闭
    handleClose() {
      this.$emit('close')
    },
    
    // 处理取消
    handleCancel() {
      this.$emit('cancel')
    },
    
    // 处理确认
    handleConfirm() {
      if (this.confirmDisabled) return
      this.$emit('confirm')
    }
  }
}
</script>

<style lang="scss" scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.3s ease;

  .modal-container {
    background: white;
    border-radius: 24rpx;
    overflow: hidden;
    max-width: 90%;
    max-height: 90%;
    animation: modalIn 0.3s ease;

    // 位置变体
    &--center {
      margin: auto;
    }

    &--top {
      align-self: flex-start;
      margin-top: 100rpx;
    }

    &--bottom {
      align-self: flex-end;
      margin-bottom: 100rpx;
      border-radius: 24rpx 24rpx 0 0;
    }

    &--left {
      align-self: flex-start;
      margin-left: 50rpx;
      margin-right: auto;
    }

    &--right {
      align-self: flex-start;
      margin-left: auto;
      margin-right: 50rpx;
    }

    // 大小变体
    &--small {
      width: 600rpx;
      min-height: 300rpx;
    }

    &--medium {
      width: 700rpx;
      min-height: 400rpx;
    }

    &--large {
      width: 800rpx;
      min-height: 500rpx;
    }

    &--full {
      width: 100%;
      height: 100%;
      border-radius: 0;
      max-width: 100%;
      max-height: 100%;
    }

    // 弹窗头部
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 2rpx solid #f5f5f5;

      .modal-title {
        flex: 1;

        .title-text {
          font-size: 32rpx;
          font-weight: 600;
          color: #333;
          display: block;
          margin-bottom: 8rpx;
        }

        .subtitle-text {
          font-size: 24rpx;
          color: #666;
          display: block;
        }
      }

      .modal-close {
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 50%;
        transition: background-color 0.3s ease;

        &:hover {
          background-color: #f5f5f5;
        }

        .close-icon {
          font-size: 32rpx;
          color: #999;
        }
      }
    }

    // 弹窗内容
    .modal-content {
      padding: 30rpx;
      max-height: 60vh;
      overflow-y: auto;

      .modal-text {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
      }
    }

    // 弹窗底部
    .modal-footer {
      padding: 30rpx;
      border-top: 2rpx solid #f5f5f5;

      .modal-buttons {
        display: flex;
        gap: 20rpx;

        .modal-button {
          flex: 1;
          padding: 24rpx;
          border-radius: 44rpx;
          font-size: 28rpx;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.3s ease;
          border: none;

          &--cancel {
            background: #f5f5f5;
            color: #666;

            &:hover {
              background: #e8e8e8;
            }

            &:active {
              transform: scale(0.98);
            }
          }

          &--confirm {
            background: #ED6567;
            color: white;

            &:hover:not(:disabled) {
              background: #d55a54;
            }

            &:active:not(:disabled) {
              transform: scale(0.98);
            }

            &:disabled {
              opacity: 0.6;
              cursor: not-allowed;
            }
          }
        }
      }
    }
  }
}

// 动画效果
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(-50rpx);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

// 特殊用途的弹窗样式
.modal-container {
  // 确认弹窗
  &--confirm {
    .modal-content {
      text-align: center;
      padding: 60rpx 30rpx;
    }

    .modal-buttons {
      justify-content: center;

      .modal-button {
        min-width: 200rpx;
      }
    }
  }

  // 输入弹窗
  &--input {
    .modal-content {
      .modal-text {
        margin-bottom: 30rpx;
      }
    }
  }

  // 选择弹窗
  &--select {
    .modal-content {
      padding: 0;

      .select-list {
        .select-item {
          padding: 30rpx;
          border-bottom: 2rpx solid #f5f5f5;
          cursor: pointer;
          transition: background-color 0.3s ease;

          &:hover {
            background-color: #f8f9fa;
          }

          &:last-child {
            border-bottom: none;
          }

          &.selected {
            background-color: rgba(237, 101, 103, 0.1);
            color: #ED6567;
          }
        }
      }
    }
  }

  // 底部弹窗
  &--bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 24rpx 24rpx 0 0;
    animation: slideUp 0.3s ease;

    .modal-header {
      .modal-title {
        text-align: center;
      }
    }
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

// 响应式适配
@media (max-width: 750rpx) {
  .modal-container {
    &--small {
      width: 90%;
    }

    &--medium {
      width: 95%;
    }

    &--large {
      width: 98%;
    }
  }
}
</style>
